window.onload = function(){
    var divs=document.getElementsByClassName("listimg");
    var timeKey;
    function rotate(){
        shownext();
        timeKey = setTimeout(rotate,2000);
    }
    setAction(0, divs);
    timeKey = setTimeout(rotate, 2000);

    function setAction(index, divlist){
        for(var i=0;i<divlist.length;i++){
            var div=divlist[i];
            var currentIndex = div.getAttribute("data-index");
            var classStr = delAction(div.getAttribute("class"));
            div.setAttribute("class", classStr);
            if(currentIndex == index){
                div.setAttribute("class", div.getAttribute("class")+" action");
            }
        }
    }

    function getIndex(divlist){
        var currentIndex = 0;
        for(var index=0;index<divlist.length;index++){
            var div=divlist[index];
            var classStr = div.getAttribute("class");
            if(classStr.indexOf("action") > -1){
                currentIndex = div.getAttribute("data-index");
            }
        }
        return currentIndex;
    }

    function delAction(str){
        if(!str) return "";
        var classArr = str.split(" ");
        for(var i=0;i<classArr.length;i++){
            if(classArr[i] == "action"){
                classArr.splice(i,1);
            }
        }
        str = classArr.join(" ");
        return str;
    }

    var btnprev=document.getElementsByClassName("bar-prev");
    btnprev[0].addEventListener('click', prevClick);

    function prevClick(){
        clearTimeout(timeKey);
        showprev();
        timeKey = setTimeout(rotate,2000);
    }

    var btnnext=document.getElementsByClassName("bar-next");
    btnnext[0].addEventListener('click', nextClick);

    function nextClick(){
        clearTimeout(timeKey);
        shownext();
        timeKey = setTimeout(rotate,2000);
    }

    function shownext(){
        var index = getIndex(divs);
        index++;
        if(index>=divs.length){
            index = 0;
        }
        setAction(index,divs);
    }

    function showprev(){
        var index = getIndex(divs);
        index--;
        if(index<0){
            index = divs.length-1;
        }
        setAction(index,divs);
    }

    // function setnewAction(index){
    //         var divs=document.getElementsByClassName("content-bar")[0].getElementsByTagName("span");
    //     for(var i=0;i<divs.length;i++){
    //         var div=divs[i];
    //         var currentIndex = div.getAttribute("data-index");
    //         var classStr = delAction(div.getAttribute("class"));
    //         div.setAttribute("class", classStr);
    //         if(currentIndex == index){
    //             div.setAttribute("class", div.getAttribute("class")+"action");
    //         }
    //     }
    // }
    // function setnewAction(index){
    //     var div=btnicon;
    //     setAction(index);
    // }

    var btnicon=document.getElementsByClassName("content-bar")[0].getElementsByTagName("span");
    for(var i=0;i<btnicon.length;i++){
        var icon = btnicon[i];
        icon.addEventListener('click',barclick);
    }
    function barclick(){
        var index = this.getAttribute("data-index");
        setAction(index,btnicon)
        setAction(index,divs);
        clearTimeout(timeKey);
        timeKey = setTimeout(rotate, 2000);
    }
};

// var list =document.getElementsByClassName("content-bar").getElementsByTagName("span");
// function mousenter(){
//     var index =list.index(this);
//     showpics(index);
// }
// function mouseout(){
//     rotate();
// }
// function showpics(index){

// }


